import React, {useState, useLayoutEffect} from 'react';
import {
  StyleSheet,
  View,
  Text,
  SafeAreaView,
  Image,
  TouchableOpacity,
} from 'react-native';
//import { get } from 'utils/request';
//import qs from 'qs';
import {ResponseType} from 'types';
import {useDispatch, useSelector} from 'react-redux';
import {DrawerActions} from '@react-navigation/native';
import {selectChannel, selectQueryTimes} from 'reduxState/selectors';
import {VirgetParamType} from 'components/VirScroll';
import api from 'service';
import EventList from './EventList';
import RnButton from 'components/RnButton';
import lang from 'lang';
import actions from 'reduxState/actions';
const limit = 1000;

interface Props {
  navigation: any;
}

function EventListScreen({navigation}: Props) {
  const dispatch = useDispatch();
  const channel = useSelector(selectChannel);
  const timeMeta = useSelector(selectQueryTimes);
  const [count, setCount] = useState(0);
  async function getData({offset}: VirgetParamType) {
    const {data}: ResponseType = await api.getEventList(
      offset,
      limit,
      String(channel.id || ''),
      timeMeta?.before,
      timeMeta?.after,
    );
    setCount(data.events.length);
    return {list: data.events, hasMore: data.hasMore};
  }
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <TouchableOpacity
          style={styles.headerIconContainer}
          onPress={() => {
            navigation.dispatch(DrawerActions.toggleDrawer());
          }}>
          <Image
            style={styles.headerIcon}
            source={require('assets/icons/search.png')}
          />
        </TouchableOpacity>
      ),
    });
  }, [navigation]);
  const SerchContent = () => {
    return (
      <View style={styles.searchContainer}>
        <View style={styles.searchLine}>
          <Text style={styles.resultNum}>{`${count} Result`}</Text>
          <RnButton
            style={styles.clearBtn}
            type="primary"
            onPress={() => {
              dispatch(actions.setSelectedChannel({id: '', name: ''}));
              dispatch(actions.setSelectedDate(undefined));
            }}>
            {lang('clearSearch')}
          </RnButton>
        </View>
        <Text style={styles.searchTip}>
          Searched for {channel.name} Activities from 20/06 to 24/06
        </Text>
      </View>
    );
  };
  const show = !!channel.name || !!timeMeta?.before;
  return (
    <SafeAreaView style={styles.container}>
      {show && <SerchContent />}
      <EventList queryFn={getData} />
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  headerIconContainer: {
    paddingLeft: 20,
  },
  headerIcon: {
    width: 24,
    height: 24,
  },
  container: {
    flex: 1,
    backgroundColor: '#efefef',
  },
  listRow: {
    overflow: 'hidden',
    marginHorizontal: 15,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#E8E8E8',
  },
  itemHeaderContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingBottom: 10,
  },
  creatorContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  creatorAvatar: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  creatorName: {
    marginLeft: 8,
    fontSize: 12,
    fontWeight: 'bold',
    color: '#67616D',
  },
  channelName: {
    paddingVertical: 3,
    paddingHorizontal: 8,
    fontSize: 12,
    lineHeight: 12,
    color: '#D3C1E5',
    borderStyle: 'solid',
    borderWidth: 1,
    borderRadius: 10,
    borderColor: '#D3C1E5',
  },
  itemHSubContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  subLeft: {flex: 1},
  itemTitle: {
    fontSize: 18,
    color: '#453257',
    fontWeight: 'bold',
  },
  itemTimeContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
  },
  timeIcon: {
    width: 12,
    height: 12,
  },
  timestamp: {
    marginLeft: 5,
    fontSize: 12,
    color: '#8560A9',
  },
  imagesContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 300,
  },
  image: {
    width: 64,
    height: 64,
    resizeMode: 'cover',
  },
  desc: {
    marginBottom: 8,
    fontSize: 14,
    color: '#67616D',
  },
  metaTextContainer: {
    flexDirection: 'row',
  },
  metaBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 30,
  },
  metaIcon: {
    marginRight: 6,
    width: 12,
    height: 12,
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 188,
  },
  emptyTip: {
    marginTop: 14,
    color: '#BABABA',
  },
  // 查询结果顶部
  searchContainer: {
    backgroundColor: '#FAF9FC',
    paddingTop: 14,
    paddingRight: 15,
    paddingBottom: 11,
    paddingLeft: 27,
  },
  searchLine: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  resultNum: {
    fontSize: 16,
    fontWeight: '500',
    color: '#8560A9',
  },
  clearBtn: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    backgroundColor: '#E5F7A9',
    borderRadius: 15,
  },
  searchTip: {
    marginTop: 6,
    fontSize: 12,
    color: '#67616D',
  },
});
export default EventListScreen;
